<template>
	<view class="feedback">
		<view class="feedback-wrap">
			<view class="feedback-title">
				 <input class="input" v-model="title" maxlength="20" placeholder="反馈标题" />
			</view>
			<view class="uni-textarea">
				<textarea @input="bindTextAreaBlur" placeholder="请输入意见反馈内容" />
			</view>
			<view class="feedback-btn">
				<button class="base-btn" @tap="onSubmit">提交意见反馈</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '',
			data: ''
		};
	},
	methods: {
		 bindTextAreaBlur (e) {
            this.data = e.detail.value
        },
		onSubmit () {
			if (this.title.length < 1) {
				uni.showToast({
					title: '请输入标题',
					icon: 'none'
				});
				return
			}
			if (this.data.length < 1) {
				uni.showToast({
					title: '请输入意见反馈内容',
					icon: 'none'
				});
				return
			}
			uni.showLoading({
				title: '正在提交...'
			})
			this.$http.feedback({
				title: this.title,
				note: this.data
			}).then(res => {
				const data = res.data
				uni.hideLoading()
				if (data.success) {
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					})
					this.title = '',
					this.data = ''
					return
				}
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				})
			})
		}
	}
};
</script>

<style scoped lang="scss">
.feedback {
	&-wrap {
		padding: 60upx 40upx;
	}
	&-title {
		margin-bottom: 30upx;
		text-align: left;
		border-radius: 10upx;
		border: 2upx solid #3E527E;
		.input {
			padding: 15upx 20upx;
		}
	}
	height: 100vh;
	background-color: #fff;
	text-align: center;
	.uni-textarea {
		text-align: left;
		padding: 20upx;
		border-radius: 10upx;
		border: 2upx solid #3E527E;
	}
		
	&-btn {
		padding: 40upx 60upx;
	}
}
</style>
